<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table,
    tr,
    th,
    td {
      border: 1px solid #ccc;
    }

    tr {
      height: 40px;
    }

    table {
      border-collapse: collapse;
      width: 630px;
      text-align: center;
      margin: 20px auto;
    }

    thead {
      background-color: yellowgreen;
    }

    fieldset {
      width: 600px;
      margin: 0 auto;
    }

    input {
      height: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <fieldset>
      <legend>学生录入系统</legend>
      <p><span>姓名：</span><input type="text" name="username" class="username" id="iptName"></p>
      <p><span>年龄：</span><input type="text" name="age" class="age" id="iptAge"></p>
      <p><span>性别：</span><select name="sex" id="sex">
          <option value="男">男</option>
          <option value="女">女</option>
        </select></p>
      <p><span>手机：</span><input type="text" name="phone" class="phone" id="iptPhone"></p>
      <p><button id="but">确认提交</button></p>
    </fieldset>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>手机</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody class="tbody" id="Tbody"></tbody>
    </table>
  </div>
  <script>
    var iptName = document.getElementById('iptName')
    var iptAge = document.getElementById('iptAge')
    var iptsex = document.getElementById('sex')
    var iptPhone = document.getElementById('iptPhone')
    var iptBut = document.getElementById('but')
    var body = document.getElementById('Tbody')

    iptBut.onclick = function () {
      if (iptName.length <= 0 || iptAge.length <= 0 || iptPhone.length <= 0) return alert('请输入完整内容')
      body.innerHTML += '<tr> <th>' + iptName.value + '</th> <th>' + iptAge.value + '</th> <th>' + iptsex.value + '</th> <th>' + iptPhone.value + '</th><th><a class="a">删除</a></th></tr>'
      iptAge.value = ''
      iptName.value = ''
      iptPhone.value = ''
    }
    body.onclick = function (e) {
      if (body.childNodes.length <= 1) return alert('元素内容不能少于一个')
      if (e.target.className == 'a') {
        body.removeChild(e.target.parentNode.parentNode)
        console.log(e.target.parentNode.parentNode)
        console.log(e.target.parentNode)
      }
    }
  </script>
</body>

</html>